import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Alert,
    FlatList,
    TextInput,
    Linking,
    Image,
    DeviceEventEmitter,
    ScrollView,
    ViewBase
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import NoData from '../../utils/NoData'
import Loading from "../../utils/Loading";
import { getImgUrl } from '../../utils/ComFunction'
import Header from "../../components/header";
import LinearGradient from 'react-native-linear-gradient';
import AlertCommonView from '../../components/Tool/AlertCommonView';
import AsyncImage from '../../components/image/AsyncImage';
import CommonDialog from "../../components/dialog/CommonDialog";


const screenW = Dimensions.get('window').width;

let navigation

export default class LogisticsOrderingSubmitPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            orderNo: this.props.route.params.orderNo,
            isBuyer: Constant.userInfo.isFranchisee != '1' ? true : false,
            pickupMethod: 'cart', //提车方式, driver 代驾，cart 小板
            deliveryMethod: 'cart', //送车方式, driver 代驾，cart 小板
            data: {},
            showAlertData: {},
            showAlertCommonView: false,
            totalcost: '',
            from: this.props.route.params.from,//afterSale 售后
            transportScheme: 10,//10:分段运输， 20:全程大板， 30:全程小板， 40:全程地跑
            quotationEstimatedPrice: {},
            fdPrice: 0,
            dialogVisible: false,
        }
    }

    componentDidMount() {

        if (this.state.from == 'afterSale') {
            this.getAfterSaleLogisticsRouteEnquiry()
            this.setState({
                isBuyer: Constant.userInfo.isFranchisee == '1' ? true : false,
            })
        } else {
            this.getLogisticsRouteEnquiry()
            this.quotationEstimatedPrice()
        }

    }

    getLogisticsRouteEnquiry() {
        let params = {
            orderNo: this.state.orderNo,
            
            transportScheme: this.state.transportScheme
        }

        if(this.state.transportScheme == 10){
            params['deliveryMethod'] = this.state.deliveryMethod
            params['pickupMethod'] = this.state.pickupMethod
        }

        this.Loading.show()
        HttpUtils.postRequest(HttpUrls.getLogisticsRoutePrice, params)
            .then((result) => {
                this.Loading.hide()
                if (result.code == 0) {
                    let data = result.data;
                    data.shippingAddress = data.shippingAddress ? data.shippingAddress.replace(/._/g, ' ') : '';
                    data.deliveryAddress = data.deliveryAddress ? data.deliveryAddress.replace(/._/g, ' ') : '';
                    data.deliveryAddress = data.deliveryAddress ? data.deliveryAddress.replace('\n', '') : '';
                    data.carName = data.carName ? data.carName.replace(/#/g, ' ') : '';
                    this.setState({
                        data: data,
                        totalcost: result.data.totalCost
                    })
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                this.Loading.hide()
                ToastToUser(error)
            });
    }

    getAfterSaleLogisticsRouteEnquiry() {
        let params = {
            orderNo: this.state.orderNo,
            
            transportScheme: this.state.transportScheme
        }

        if(this.state.transportScheme == 10){
            params['deliveryMethod'] = this.state.deliveryMethod
            params['pickupMethod'] = this.state.pickupMethod
        }
        this.Loading.show()
        HttpUtils.postRequest(HttpUrls.afterSaleRoutePrice, params)
            .then((result) => {
                this.Loading.hide()
                if (result.code == 0) {
                    let data = result.data;
                    data.shippingAddress = data.shippingAddress ? data.shippingAddress.replace(/._/g, ' ') : '';
                    data.deliveryAddress = data.deliveryAddress ? data.deliveryAddress.replace(/._/g, ' ') : '';
                    data.deliveryAddress = data.deliveryAddress ? data.deliveryAddress.replace('\n', '') : '';
                    data.carName = data.carName ? data.carName.replace(/#/g, ' ') : '';
                    this.setState({
                        data: data,
                        totalcost: result.data.totalCost
                    })
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                this.Loading.hide()
                ToastToUser(error)
            });
    }


    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} hideSepLine={true} Title={'是否下单物流'} ></Header>
                <ScrollView style={{ flex: 1, paddingTop: 10 }}>
                    <View style={styles.itemBox}>
                        <Image style={styles.itemImg} source={require('source/image/logistics_send.png')} />
                        <View style={styles.itemRightBox}>
                            <Text style={styles.itemTitleText} numberOfLines={2}>{this.state.data.shippingAddress}</Text>
                            <Text style={styles.itemDesText}>{(this.state.data.shippingMerchantName ? this.state.data.shippingMerchantName : '') + ' ' + (this.state.data.shippingPhone ? this.state.data.shippingPhone : '')}</Text>
                        </View>
                        <View style={styles.sepLine} />
                    </View>
                    <View style={styles.itemBox}>
                        <Image style={styles.itemImg} source={require('source/image/logistics_receive.png')} />
                        <View style={styles.itemRightBox}>
                            <Text style={styles.itemTitleText} numberOfLines={2}>{this.state.data.deliveryAddress}</Text>
                            <Text style={styles.itemDesText}>{(this.state.data.deliveryMerchantName ? this.state.data.deliveryMerchantName : '') + ' ' + (this.state.data.deliveryPhone ? this.state.data.deliveryPhone : '')}</Text>
                        </View>
                    </View>
                    <View style={styles.carBg}>
                        <Text style={styles.titleText}>托运车辆</Text>
                        <View style={styles.carBox}>
                            <AsyncImage style={styles.carImg} source={{ uri: getImgUrl(this.state.data.mainPic) }} defaultSource={require('source/image/icon_car_default.png')} />
                            <View style={styles.carInfoBox}>
                                <Text style={styles.brandText} numberOfLines={2}>{this.state.data.carName}</Text>
                                <Text style={styles.infoText}>{this.carInfo()}</Text>
                                {/* <Text style={styles.infoText}>{'VIN：LKJSJ2M322345343'}</Text>
                                <Text style={styles.priceText}>{'收购价 95.00万元'}</Text> */}
                            </View>
                        </View>

                        {
                            this.state.isBuyer ?

                                    <View>
                                        <View style={styles.sepLine1} />
                                        {this.plan()}

                                    </View>
                                    
                                :
                                <View style={styles.typeBox}>
                                    <View style={styles.sepLine1} />
                                    <Text style={styles.titleText}>{'服务'}</Text>
                                    <View style={styles.buyerTypeBox}>
                                        <View style={styles.serviceBox}>
                                            <Image style={styles.serviceImg} source={require('source/image/service_pick_car.png')} />
                                            <Text style={styles.serviceText}>上门提车</Text>
                                        </View>
                                        <View style={[styles.serviceBox, { marginLeft: 12 }]}>
                                            <Image style={styles.serviceImg} source={require('source/image/service_delivery_car.png')} />
                                            <Text style={styles.serviceText}>送门上车</Text>
                                        </View>
                                    </View>
                                </View>
                        }
                    </View>
                    {
                        this.state.isBuyer ?
                            <Text style={{ fontSize: 14, color: '#ED542E', textAlign: 'center', marginTop: 12, marginBottom: 20 }}>{'提示：若对运费有疑问，请先详询物流客服'}</Text>
                            :
                            null
                    }
                </ScrollView>

                <View style={{ width: '100%', flexDirection: 'column', backgroundColor: '#fff', height: 60 + Constant.bottomHeight }}>
                    <View style={styles.bottomBox}>
                        <TouchableOpacity
                            style={styles.bottomServiceBox}
                            onPress={() => {
                                this.logisticsService()
                            }}
                        >
                            <Image source={require('source/image/service_icon.png')} />
                            <Text style={styles.bottomServiceText}>物流客服</Text>
                        </TouchableOpacity>
                        <View style={styles.bottomRightBox}>
                            {
                                this.state.isBuyer  ?
                                    <View style={{ flexDirection: 'column', alignItems: 'flex-end', height: '100%' }}>
                                        <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                                            <Text style={{ fontSize: 20, color: '#ED542E', fontWeight: '500' }}>{(this.state.totalcost)}</Text>
                                            <Text style={{ fontSize: 12, color: '#ED542E', marginBottom: 3 }}>{'元'}</Text>
                                        </View>
                                        <Text style={{ fontSize: 12, color: '#333333', marginTop: 3 }}>预估运费</Text>
                                    </View>
                                    :
                                    null
                            }

                            <TouchableOpacity
                                activeOpacity={0.8}
                                style={styles.bottomSureBox}
                                onPress={() => {
                                    this.setState({
                                        showAlertData: {
                                            title: '提示',
                                            content: '是否确认下单？',
                                            cancelBtnText: '取消',
                                            sureBtnText: '确定',
                                        },
                                        showAlertCommonView: true
                                    })
                                }}
                            >
                                <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
                                    colors={['#FFEF3A', '#FFDB1B']}
                                    style={styles.itemInnerBox}>
                                    <Text style={styles.bottomSureText}>确认</Text>

                                </LinearGradient>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>

                {
                    this.state.showAlertCommonView ?
                        <AlertCommonView
                            title={this.state.showAlertData.title}
                            content={this.state.showAlertData.content}
                            cancelBtnText={this.state.showAlertData.cancelBtnText}
                            sureBtnText={this.state.showAlertData.sureBtnText}
                            cancelHandler={() => {
                                this.setState({
                                    showAlertCommonView: false
                                })
                            }}
                            sureHandler={() => {
                                this.setState({
                                    showAlertCommonView: false
                                })
                                if (this.state.from == 'afterSale') {
                                    this.afterSaleSubmit()
                                } else {
                                    this.submit()
                                }

                            }}
                        />
                        :
                        null
                }

                <CommonDialog
                    visible={this.state.dialogVisible}

                    title={'物流方案'}
                    content={'分段运输：\n' +
                        '是指小板车或者代驾司机上门取车，送到当地物流园，在物流园上大板车;大板车开到目城市的 地物流园卸车，再由小板或者代驾司机送到最终目的地。中长途推荐，不支持豪车运输。\n' +
                        '\n' +
                        '全程代驾：\n' +
                        '是指代驾司机上门拿车，直接开到目的地交车，短途运输推荐选择。\n' +
                        '\n' +
                        '全程小板：\n' +
                        '是小板车上门拿车，也是直接送到目的地交车。运输豪车推荐选择。'}
                    confrimText={'确定'}
                    cancelText={'关闭'}
                    onConfrim={() => {
                        this.setState({
                            dialogVisible: false
                        })
                    }}
                    onCancel={() => {
                        this.setState({
                            dialogVisible: false
                        })
                    }}
                />


                <Loading onRef={(ref) => (this.Loading = ref)} />
            </View>
        )
    }

    plan(){
        return (
            <View style={styles.card}>
                <TouchableOpacity activeOpacity={0.8} style={{flexDirection: 'row', alignItems: 'center'}} onPress={() => {
                    console.log('显示物流提示')
                    this.setState({
                        dialogVisible: true
                    })
                }}>
                    <Text style={styles.cardTitle}>运输方案</Text>
                    <Image style={styles.customerServiceTipIcon} source={require('source/image/question_icon.png')}/>
                </TouchableOpacity>


                <TouchableOpacity onPress={()=>{
                    this.setState({
                        transportScheme: 10,
                        totalcost: this.formPrice(this.state.fdPrice)
                    },function(){
                        // this.getLogisticsRouteEnquiry()
                    })
                }} style={styles.optionRow}>
                    <Text style={styles.optionLabel}>{'分段运输'}</Text>
                    <View style={styles.priceAndCheckbox}>
                        <Text style={styles.price}>{this.formPrice(this.state.fdPrice) + '元'}</Text>
                        <View style={styles.checkbox}>
                            {this.state.transportScheme == 10 && <View style={styles.checkboxSelected} />}
                        </View>
                    </View>
                </TouchableOpacity>

                {this.state.transportScheme == 10 && (
                    <View style={styles.segmentedOptions}>
                        <View style={styles.subOptionRow}>
                            <Text style={styles.subOptionLabel}>提车</Text>

                            <TouchableOpacity onPress={()=>{
                                this.setState({
                                    pickupMethod: 'cart'
                                }, function () {
                                    this.handlePickupMethodChange()
                                })
                            }} style={styles.radioButtonContainer}>
                                <View style={[styles.radioButton, this.state.pickupMethod == 'cart' && styles.radioButtonSelected]}>
                                    {this.state.pickupMethod == 'cart' && <View style={styles.radioButtonInner} />}
                                </View>
                                <Text style={styles.radioLabel}>{'小板'}</Text>
                            </TouchableOpacity>

                            <TouchableOpacity onPress={()=>{
                                this.setState({
                                    pickupMethod: 'driver'
                                }, function () {
                                    this.handlePickupMethodChange()
                                })
                            }} style={styles.radioButtonContainer}>
                                <View style={[styles.radioButton, this.state.pickupMethod == 'driver' && styles.radioButtonSelected]}>
                                    {this.state.pickupMethod == 'driver' && <View style={styles.radioButtonInner} />}
                                </View>
                                <Text style={styles.radioLabel}>{'代驾'}</Text>
                            </TouchableOpacity>

                        </View>
                        <View style={styles.subOptionRow}>
                            <Text style={styles.subOptionLabel}>送车</Text>
                            <TouchableOpacity onPress={()=>{
                                this.setState({
                                    deliveryMethod: 'cart'
                                }, function () {
                                    this.handlePickupMethodChange()
                                })
                            }} style={styles.radioButtonContainer}>
                                <View style={[styles.radioButton, this.state.deliveryMethod == 'cart' && styles.radioButtonSelected]}>
                                    {this.state.deliveryMethod == 'cart' && <View style={styles.radioButtonInner} />}
                                </View>
                                <Text style={styles.radioLabel}>{'小板'}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={()=>{
                                this.setState({
                                    deliveryMethod: 'driver'
                                }, function () {
                                    this.handlePickupMethodChange()
                                })
                            }} style={styles.radioButtonContainer}>
                                <View style={[styles.radioButton, this.state.deliveryMethod == 'driver' && styles.radioButtonSelected]}>
                                    {this.state.deliveryMethod == 'driver' && <View style={styles.radioButtonInner} />}
                                </View>
                                <Text style={styles.radioLabel}>{'代驾'}</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                )}

                <View style={styles.optionSeparator} />
                <TouchableOpacity onPress={()=>{
                    this.setState({
                        transportScheme: 40,
                        totalcost: this.formPrice(this.state.quotationEstimatedPrice?.fullServiceDrivingFee)
                    },function(){
                        // this.getLogisticsRouteEnquiry()
                    })
                }} style={styles.optionRow}>
                    <Text style={styles.optionLabel}>{'全程代驾'}</Text>
                    <View style={styles.priceAndCheckbox}>
                        <Text style={styles.price}>{this.formPrice(this.state.quotationEstimatedPrice?.fullServiceDrivingFee) + '元' || ''}</Text>
                        <View style={styles.checkbox}>
                            {this.state.transportScheme == 40 && <View style={styles.checkboxSelected} />}
                        </View>
                    </View>
                </TouchableOpacity>

                <View style={styles.optionSeparator} />
                <TouchableOpacity onPress={()=>{
                    this.setState({
                        transportScheme: 30,
                        totalcost: this.formPrice(this.state.quotationEstimatedPrice?.fullSmallBoardFee)
                    },function(){
                        // this.getLogisticsRouteEnquiry()
                    })
                }} style={styles.optionRow}>
                    <Text style={styles.optionLabel}>{'全程小板'}</Text>
                    <View style={styles.priceAndCheckbox}>
                        <Text style={styles.price}>{this.formPrice(this.state.quotationEstimatedPrice?.fullSmallBoardFee) + '元' || ''}</Text>
                        <View style={styles.checkbox}>
                            {this.state.transportScheme == 30 && <View style={styles.checkboxSelected} />}
                        </View>
                    </View>
                </TouchableOpacity>

            </View>
        )
    }

    handlePickupMethodChange() {
        let price = 0;
        if(this.state.pickupMethod == 'cart' && this.state.deliveryMethod == 'cart'){ //小板+小板
            price = this.state.quotationEstimatedPrice?.segmentSmallBoardAndSmallBoardFee
        }
        if(this.state.pickupMethod == 'driver' && this.state.deliveryMethod == 'driver'){ //代驾+代驾
            price = this.state.quotationEstimatedPrice?.segmentDrivingServiceAndDrivingServiceFee
        }
        if(this.state.pickupMethod == 'cart' && this.state.deliveryMethod == 'driver'){ //小板+代驾
            price = this.state.quotationEstimatedPrice?.segmentSmallBoardAndDrivingServiceFee
        }
        if(this.state.pickupMethod == 'driver' && this.state.deliveryMethod == 'cart'){ //代驾+小板
            price = this.state.quotationEstimatedPrice?.segmentDrivingServiceAndSmallBoardFee
        }
        this.setState({
            fdPrice: price,
            totalcost: this.formPrice(price)
        })
    }
    formPrice(price) {
        if(!price){
            return 0
        }
        return parseFloat(price/100).toFixed(2)
    }
    quotationEstimatedPrice(){
        let param = {
            orderNo: this.state.orderNo,
        }
        console.log('quotationEstimatedPrice', param)

        if (this.Loading) {
            this.Loading.show('请稍后...');
        }

        HttpUtils.postRequest(HttpUrls.quotationEstimatedPrice, param)
            .then((result) => {
                let data = result.data
                console.log('quotationEstimatedPrice', data)
                this.setState({
                    quotationEstimatedPrice: data,
                    fdPrice: data.segmentSmallBoardAndSmallBoardFee,
                    totalcost: this.formPrice(data.segmentSmallBoardAndSmallBoardFee)
                })
                // this.totalPrice()
            })
            .catch((error) => {
            }).finally(() => {
            if (this.Loading) {
                this.Loading.hide();
            }
        })
    }

    carInfo() {
        let carInfoStr = ''
        if (this.state.data.registerDate) {
            carInfoStr = moment(this.state.data.registerDate).format('YYYY-MM')
        }
        if (this.state.data.mileage) {
            if (carInfoStr) {
                carInfoStr = carInfoStr + ' | '
            }
            carInfoStr = carInfoStr + (this.state.data.mileage / 10000) + '万公里'
        }
        if (this.state.data.cityName) {
            if (carInfoStr) {
                carInfoStr = carInfoStr + ' | '
            }
            carInfoStr = carInfoStr + this.state.data.cityName
        }

        return carInfoStr
    }

    submit() {
        this.Loading.show('下单中...')
        let params = {
            orderNo: this.state.orderNo,
            totalcost: parseFloat(this.state.totalcost) * 100,
            pickupMethod: this.state.pickupMethod,
            deliveryMethod: this.state.deliveryMethod,
            transportScheme: this.state.transportScheme
        }
        console.log(params)

        HttpUtils.getRequest(this.state.isBuyer ? HttpUrls.buyerConfirmLogistics : HttpUrls.sellerConfirmLogistics, params)
            .then((result) => {
                this.Loading.hide()
                if (result.code == 0) {
                    ToastToUser('下单成功')
                    if (this.props.route.params.submitHandler) {
                        this.props.route.params.submitHandler(result.data.logisticsNo)
                    }
                    setTimeout(() => {
                        navigation.replace('MessageChat', {
                            imGroupId: result.data.imConversationId ? result.data.imConversationId : '',
                            carId: this.state.data.carId
                        })
                        // navigation.replace('LogisticsTrackPage', { logisticsNo: result.data.logisticsNo })
                    }, 1000);
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                this.Loading.hide()
                ToastToUser(error)
            });
    }

    afterSaleSubmit() {
        this.Loading.show('下单中...')
        let params = {
            orderNo: this.state.orderNo,
            totalcost: this.state.totalcost,
            pickupMethod: this.state.pickupMethod,
            deliveryMethod: this.state.deliveryMethod,
            transportScheme: this.state.transportScheme
        }

        HttpUtils.getRequest(this.state.isBuyer ? HttpUrls.afterSaleSellerConfirm : HttpUrls.afterSaleBuyerConfirm , params)
            .then((result) => {
                this.Loading.hide()
                if (result.code == 0) {
                    ToastToUser('下单成功')
                    if (this.props.route.params.submitHandler) {
                        this.props.route.params.submitHandler(result.data.logisticsNo)
                    }
                    setTimeout(() => {
                        navigation.replace('MessageChat', {
                            imGroupId: result.data.imConversationId ? result.data.imConversationId : '',
                            carId: this.state.data.carId
                        })
                        // navigation.replace('LogisticsTrackPage', { logisticsNo: result.data.logisticsNo })
                    }, 1000);
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                this.Loading.hide()
                ToastToUser(error)
            });
    }

    logisticsService() {
        this.Loading.show('')
        HttpUtils.getRequest(HttpUrls.getCustomerServicePhone, {})
            .then((result) => {
                this.Loading.hide()
                if (result.code == 0) {
                    const url = `tel:${result.data}`;
                    Linking.canOpenURL(url).then(supported => {
                        if (!supported) {
                            return Alert.alert('提示', `您的设备不支持该功能，请手动拨打 ${result.data}`, [
                                { text: '确定' }
                            ]);
                        }
                        return Linking.openURL(url);
                    }).catch(err => Alert(err));
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                this.Loading.hide()
                ToastToUser(error)
            });

        let params = {
            orderNo: this.state.orderNo,
            pickupMethod: this.state.pickupMethod,
            deliveryMethod: this.state.deliveryMethod,
        }
        HttpUtils.postRequest(HttpUrls.getLogisticsClueEnquiry, params)
            .then((result) => {
                if (result.code == 0) {

                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                ToastToUser(error)
            });
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    itemBox: {
        width: '100%',
        padding: 16,
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center'
    },
    itemImg: {
        width: 22,
        height: 22,
    },
    itemRightBox: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'flex-start',
        marginLeft: 12
    },
    itemTitleText: {
        lineHeight: 20,
        fontSize: 15,
        fontWeight: '500',
        color: '#222222'
    },
    itemDesText: {
        marginTop: 7,
        fontSize: 14,
        color: '#666666'
    },
    sepLine: {
        position: 'absolute',
        bottom: 0,
        left: 16,
        width: '100%',
        height: 0.3,
        backgroundColor: '#E4E4E4'
    },
    sepLine1: {
        marginTop: 12,
        marginBottom: 16,
        width: '100%',
        height: 0.3,
        backgroundColor: '#E4E4E4'
    },
    carBg: {
        marginTop: 10,
        width: '100%',
        backgroundColor: '#fff',
        paddingHorizontal: 16,
        paddingTop: 14,
        paddingBottom: 16,
    },
    titleText: {
        fontSize: 16,
        fontWeight: '500',
        color: '#333333'
    },
    carBox: {
        marginTop: 14,
        flexDirection: 'row',
    },
    carImg: {
        width: 130,
        height: 90,
        borderRadius: 4,
        backgroundColor: '#f9f9f9'
    },
    carInfoBox: {
        flex: 1,
        marginLeft: 12,
        flexDirection: 'column',
        alignItems: 'flex-start'
    },
    brandText: {
        fontSize: 14,
        color: '#333333',
        fontWeight: '500',
        lineHeight: 20,
    },
    infoText: {
        marginTop: 5,
        fontSize: 12,
        color: '#333'
    },
    priceText: {
        marginTop: 9,
        fontSize: 14,
        color: '#333'
    },
    typeBox: {
        flexDirection: 'column',
    },
    buyerTypeBox: {
        marginTop: 10,
        flexDirection: 'row',
        alignItems: 'center'
    },
    buyerTypeItemBox: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    typeImg: {
        width: 20,
        height: 20
    },
    typeText: {
        marginLeft: 10,
        fontSize: 14,
        color: '#333'
    },
    serviceBox: {
        width: 86,
        height: 64,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#FFF8F1',
        borderRadius: 6
    },
    serviceImg: {
        width: 24,
        height: 24
    },
    serviceText: {
        marginTop: 5,
        fontSize: 12,
        fontWeight: '500',
        color: '#333333'
    },
    bottomBox: {
        width: '100%',
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 12,
    },
    bottomServiceBox: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
        width: 50,
    },
    bottomServiceText: {
        fontSize: 10,
        color: '#333',
        marginTop: 4,
    },
    bottomRightBox: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    bottomSureBox: {
        marginLeft: 10,
        width: 140,
        height: 36,
    },
    itemInnerBox: {
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 18,
    },
    bottomSureText: {
        fontSize: 14,
        color: '#333333'
    },

    // 运输方案
    card: {
        backgroundColor: 'white',
        // padding: 10,
        // marginHorizontal: 10,
        marginTop: 5,
    },
    cityRow: {
        flexDirection: 'row',
    },
    cityIconContainer: {
        alignItems: 'center',
        marginRight: 15,
    },
    iconCircle: {
        width: 30,
        height: 30,
        borderRadius: 15,
        justifyContent: 'center',
        alignItems: 'center',
    },
    dottedLine: {
        height: 30,
        width: 1,
        borderLeftWidth: 1,
        borderLeftColor: '#ccc',
        borderStyle: 'dashed',
    },
    cityTextContainer: {
        flex: 1,
    },
    cityTextRow: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 14,
    },
    cityLabel: {
        fontSize: 16,
        color: '#555',
        width: 80,
    },
    cityName: {
        fontSize: 16,
        fontWeight: 'bold',
    },
    separator: {
        height: 1,
        backgroundColor: '#f0f0f0',
    },
    cardTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        marginRight: 5,
    },
    customerServiceTipIcon: {
        width: 18,
        height: 18,
    },
    optionRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 15,
    },
    optionLabel: {
        fontSize: 16,
    },
    priceAndCheckbox: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    price: {
        fontSize: 16,
        color: '#333',
        marginRight: 15,
    },
    checkbox: {
        width: 20,
        height: 20,
        borderWidth: 1,
        borderColor: '#FFDB1B',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 3,
    },
    checkboxSelected: {
        width: 12,
        height: 12,
        backgroundColor: '#FFDB1B',
        borderRadius: 2,
    },
    optionSeparator: {
        height: 1,
        backgroundColor: '#f0f0f0',
    },
    segmentedOptions: {
        paddingLeft: 10,
        paddingTop: 10,
        backgroundColor: '#fafafa',
        marginTop: 10,
    },
    subOptionRow: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 10,
    },
    subOptionLabel: {
        fontSize: 16,
        color: '#555',
        width: 60,
    },
    radioButtonContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 20,
    },
    radioButton: {
        height: 20,
        width: 20,
        borderRadius: 10,
        borderWidth: 1,
        borderColor: '#FFDB1B',
        alignItems: 'center',
        justifyContent: 'center',
    },
    radioButtonSelected: {
        borderColor: '#FFDB1B',
    },
    radioButtonInner: {
        height: 10,
        width: 10,
        borderRadius: 5,
        backgroundColor: '#FFDB1B',
    },
    radioLabel: {
        marginLeft: 8,
        fontSize: 16,
    },
    hintText: {
        fontSize: 12,
        color: '#999',
        textAlign: 'center',
        padding: 15,
    },
    footer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 15,
        borderTopWidth: 1,
        borderTopColor: '#f0f0f0',
        backgroundColor: 'white',
    },
    customerService: {
        flexDirection: 'column',
        alignItems: 'center',
    },
    customerServiceIcon: {
        width: 25,
        height: 25,
    },
    customerServiceText: {
        marginLeft: 5,
        fontSize: 14,
        color: '#555',
    },
    confirmButton: {
        backgroundColor: '#FFDB1B',
        paddingVertical: 10,
        paddingHorizontal: 40,
        borderRadius: 5,
    },
    confirmButtonText: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
    },

})